<template>
	<view class="data" v-if="zhu.nickName !=undefined">

		<view class="wrap">
			<u-swiper :list="list" height='650'></u-swiper>
		</view>

		<view class="top">
			<view class="name" :style="zhu.isExpire == 2 && zhu.isUserMember != 3?'color:red;':'' ">
				{{zhu.nickName}}
			</view>


			<view class="zhong">
				<p class="sex"
					:style="zhu.sex==1?'background: url('+man+') no-repeat;background-size: contain;':zhu.sex==2?'background: url('+woman+') no-repeat;background-size: contain;':'background: url('+no+') no-repeat;background-size: contain;'">
					<view style="margin-left:15upx;font-size:22upx;">
						{{zhu.age}}
					</view>
				</p>
				<view style="width: 10upx;">

				</view>
				<img class="vipNum" :src="$BASE_URL + '/st/mini/static/img/vip1/vip_' + zhu.costLevel+ '@2x.png'" />
			</view>

			<view class="guanzhu">
				<text> 关注 {{zhu.attentionCount}}</text> <text> 粉丝 {{zhu.fansCount}}</text>
				<text> 好友 {{zhu.isUserMember}}</text>


			</view>

			<view style="height:15upx;"></view>

			<view style="border-bottom: 1upx solid #F2F2F2;"></view>
		</view>




		<view class="top">
			<view class="name">
				资料
			</view>

			<block v-if="zhu.emblemList.length !=0">
				<view class="title">
					<!-- 账号等级与 -->
					徽记
				</view>
				<view style="height:15upx;"></view>

				<!--<view class="">
				<scroll-view class="scroll-view_H" scroll-x="true" @scroll="handleScroll" scroll-left="120">
					<view class="scroll-view-item_H uni-bg-red" v-for="(item,index) in 15 ">
						<image style="width:100upx; height: auto;" src="../../../static/img/tab/bab4.png"
							mode="widthFix"></image>
						<view class="">
							vip56
						</view>
					</view>
				</scroll-view>
			</view> -->
				<view style="height:15upx;"></view>
				<view class="" style="height: 90px;">
					<scroll-view class="scroll-view_H" scroll-x="true" @scroll="handleScroll" scroll-left="10">
						<view style=" display: flex; align-items: center; height:110px;  ">
							<view class="scroll-view-item_H uni-bg-red" v-for="(item,index) in zhu.emblemList"
								style=" height:110px;   text-align: center; padding:0upx 15upx 0upx 15upx;">
								<image style="width:110upx; height: auto;margin:0 auto;"
									:src="$global.getImageUrl(item.image, 'https://ourydcimage.shenghua6.cn')"
									mode="widthFix">
								</image>
								<text class="mxjd">
									{{item.name}}
								</text>
							</view>
						</view>

					</scroll-view>

				</view>
			</block>
			<view style="height:30upx;"></view>


			<view class="title">账号信息</view>

			<view style="height:15upx;"></view>
			<view class="lika">
				哩咔ID : {{zhu.identityId}}
			</view>
			<view style="height:3upx;"></view>
			<view class="lika">
				注册日期 : {{shijian(zhu.insdt)}}
			</view>
			<view style="height:30upx;"></view>

			<view class="title" v-if="zhu.descr.length>0">个性签名 </view>
			<view style="height:15upx;"></view>

			<view class="qianm" v-if="zhu.descr.length>0">

				<view style="width:90%;margin: 0 auto;">
					{{zhu.descr}}
				</view>

			</view>



			<view style="height:30upx;"></view>
			<view class="title" v-if="gexing.length>0">兴趣爱好 </view>
			<view style="height:15upx;"></view>

			<view class="" v-if="gexing.length>0" v-for="(item,index) in gexing"
				style="float: left;margin-top: 20upx; margin-left: 20upx;">
				<u-tag :text="item" mode="light" type="error" />
			</view>

			<view style="clear:both">

			</view>
		</view>
		<view style="height:80upx;"></view>



		<view class="bottom-bot" v-if="zhu.userId != userId">

			<view class="left" @click="guanzhu()" v-if="zhu.isAttention !=1">
				关注
			</view>
			<view style="width: 8%;" v-if="zhu.isAttention !=1">

			</view>
			<view class="left" style="background-image: linear-gradient(to right, #FEAF1D , #F1B809);"
				@click="dazhaohu()">
				打招呼
			</view>
		</view>
		<view style="height:80upx;"></view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				uid: 0,

				list: [],
				$BASE_URL: this.$BASE_URL,
				man: '',
				woman: '',
				no: '',
				mvp: '',
				// 数据
				zhu: {},
				gexing: [],
				userId: 0,
			}
		},

		mounted() {

			this.man = this.$BASE_URL + '/st/mini/static/img/sex/man.png'
			this.woman = this.$BASE_URL + '/st/mini/static/img/sex/woman.png'
			this.no = this.$BASE_URL + '/st/mini/static/img/sex/no.png'
			this.mvp = this.$BASE_URL + '/st/mini/static/img/chatRoomDetails/mvp.png'
			var image = this.$global.getImageUrl('member/horse_page_vip11.png')

			this.userId = uni.getStorageSync("userInfo").userId


		},

		methods: {

			// 关注按钮



			guanzhu() {
				console.log('点击关注')
				var data = {
					url: '/web/v2/api/user/attentionUser',
					methods: 'post',
					data: {
						// userId:this.userId,
						toUserId: this.zhu.userId
					}
				}
				this.$http(data).then(res => {
					if (res.data.code == 21000) {
						uni.showToast({
							title: '关注成功~',
							icon: 'none'
						})
						this.zhu.isAttention = 1
					} else { //接口请求失败的处理
						uni.showToast({
							title: res.data.msg,
							icon: 'none'
						})
					}
				})
			},
			// 打招呼
			dazhaohu: function() {
				console.log('打招呼')

				var _this = this
				var to = this.zhu.userId
				uni.navigateTo({
					url: '../../chatpage/Chatcontent?to=' + to
				})

			},



			// // 个人资料
			// qiuqid: function() {
			// 	var _this = this
			// 	var data = {
			// 		url: "/web/v2/api/newApi/matchingV2/otherUserInfoMatchingRate",
			// 		methods: 'post',
			// 		data: {
			// 			toUserId: this.uid,
			// 			apiVersion: 3.3
			// 		}
			// 	}
			// 	_this.$http(data).then(res => {
			// 		console.log(res, "个人资料")
			// 		if (res.data.code == 21000) {


			// 		}
			// 	})
			// },



			qingeiuer: function() {
				var _this = this
				var data = {
					url: "/web/v2/api/user/profileInfoV",
					methods: 'post',
					data: {
						// toUserId
						toUserId: this.uid,
						apiVersion: 3.3
					}
				}
				_this.$http(data).then(res => {
					console.log(res, "66")

					if (res.data.code == 21000) {
						_this.zhu = res.data.data

						// 轮播图
						//  
						var image = _this.$global.getImageUrl(res.data.data.headImg)
						var obj = {
							image: image
						}
						_this.list.push(obj)

						_this.lunbo()






					}
				})
			},


			lunbo: function() {
				var s = this.zhu.photoWalls


				var js_arr = s.split("|");




				// "{"imgState":"1","imgId":"2c9116577a83f61c017a841cc9d00637","imgPath":"2021070811151647629.gif","sortNum":2}"
				for (let i = 0; i < js_arr.length; i++) {
					var e = JSON.parse(js_arr[i]).imgPath
					var str = e;
					console.log(str, "str")
					 



					var pattern3 = new RegExp("[0-9]+");

					var str3 = str[0]

					if (pattern3.test(str3)) {

						var a = str.substr(0, 4);
						console.log(a, "a"); //'e'
						var b = str.substr(4, 2);
						console.log(b, "b"); //'e'
						var c = str.substr(6, 2);
						console.log(c, "c"); //'e'

						var image = 'https://ourydcimage.shenghua6.cn' + '/' + a + '/' + b + '/' + c + '/' +
							str
						console.log('是数字')
					} else {

						var image = this.$global.getImageUrl(str,
							"https://ourydcimage.shenghua6.cn"
						);




						console.log('不是数字')

					}




					var obj = {
						image: image
					}
					this.list.push(obj)
				}

				// 个性标签
				var d = this.zhu.interest
				if (d == "") {
					return
				}

				var gex = d.split("/");

				this.gexing = gex
				console.log(image)







			},



			// 横向滚动
			handleScroll(e) {
				console.log(e);
			},


			shijian: function(time) {

				var date = new Date(time); // 初始化日期
				var year = date.getFullYear(); //获取年份
				var month = date.getMonth() + 1; // 获取月份
				var day = date.getDate(); // 获取具体日
				var hour = date.getHours(); // 获取时
				var minutes = date.getMinutes(); // 获取分
				var seconds = date.getSeconds(); // 获取秒
				return year + '-' + month + '-' + day

			}

		},
		onLoad(e) {

			this.uid = e.id
			//  
			// 请求个人资料
			// this.qiuqid()
			this.qingeiuer()







		}
	}
</script>

<style lang="less" scoped>
	.top {
		width: 95%;
		margin: 15upx auto;

	}

	.name {
		font-family: PingFangSC-Medium;
		font-size: 32upx;
		color: #333333;
		letter-spacing: 0;
	}


	.sex {
		width: 66upx;
		height: 28upx;
		line-height: 28upx;
		color: #FFFFFF;
		font-size: 18upx;
		text-align: center;
	}

	.data /deep/ .vipNum {
		display: inline-block;
		width: 50upx;
		height: 24upx;
		background-size: contain;
		background-repeat: no-repeat;
		vertical-align: middle;
		margin-right: 2upx;
	}

	.zhong {
		display: flex;
		align-items: center;
		// border: 2upx solid #007AFF;
		height: 50upx;
	}

	.guanzhu {
		font-family: PingFangSC-Regular;
		font-size: 20upx;
		color: #999999;
		letter-spacing: 0;
	}

	.guanzhu text {
		margin-left: 8upx;
	}

	.title {
		font-family: PingFang-SC-Medium;
		font-size: 25upx;
		color: #999999;
		letter-spacing: 0;
	}

	.scroll-view_H {
		white-space: nowrap;
		width: 100%;

		.scroll-view-item_H {
			display: inline-block;
			width: 15%;
			height: 90px;
			text-align: center;
			font-size: 26upx;
			color: #666;
			// background: yellow;
		}
	}

	.lika {
		font-size: 26upx;
		color: #333333;

	}

	.qianm {
		background: #FBF3FC;
		border-radius: 28upx;

		border-radius: 28upx;


		font-family: PingFang-SC-Medium;
		font-size: 24upx;
		color: #333333;
		letter-spacing: 0;
		padding: 40upx 0;
		text-align: center;
	}

	.biaoq {
		border-radius: 18upx;
		border-radius: 18upx;
		background: rgba(255, 87, 77, 0.1);
		padding: 10upx 25upx;
		margin: 30upx 0upx 0upx 30upx;
		font-family: PingFang-SC-Medium;
		font-size: 20upx;
		color: #FF574D;
		text-align: center;
	}

	.mxjd {
		font-size: 26upx;
		// border: 1px solid #000000;
		text-align: center;
		// width: 60upx;
		word-break: keep-all;
		word-wrap: break-word;
		white-space: pre-line;
	}

	.bottom-bot {
		// border: 1px solid #000000;
		position: fixed;
		bottom: 0;
		width: 100%;
		background: #FFFFFF;
		height: 100upx;

		display: flex;
		// align-items: center;
		justify-content: center;
	}

	.left {
		width: 36%;
		height: 40upx;
		padding: 10upx;
		// border: 5upx solid #008000;
		border-radius: 30upx;
		text-align: center;
		color: #FFFFFF;
		background-image: linear-gradient(to right, #54C9FB, #3FE8FE);
		box-shadow: 4px 4px 2px #E7E0E3;

	}
</style>
